<template>

  <div class="filter-container">

    <el-form
      :inline="true"
      :model="formData"
      label-position="right"
      size="small"
      class="filter-form-inline"
      label-width="100px"
    >
      <el-row
        :gutter="20"
        style="margin-left: 0px; margin-right: 0px"
      >
        <el-col
          :lg="5"
          :xs="4"
        >
          <el-form-item
            label="负责职员"
            style="width: 100%"
          >
            <el-select
              v-model="formData.selectType"
              clearable
              style="width: 100%"
              placeholder="请选择"
              @change="listSearch"
            >
              <el-option
                v-for="(item, idx) in typeOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />

            </el-select>
          </el-form-item>
        </el-col>

        <el-col
          :lg="5"
          :xs="4"
        >
          <el-form-item
            label="状态"
            style="width: 100%"
          >
            <el-select
              v-model="formData.devStatus"
              clearable
              style="width: 100%"
              placeholder="请选择"
              @change="listSearch"
            >
              <el-option
                v-for="(item, idx) in devStatus"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />

            </el-select>
          </el-form-item>
        </el-col>

        <el-col
          :lg="5"
          :xs="4"
        >
          <el-form-item
            label="终端名称"
            style="width: 100%"
          >
            <el-input
              v-model="formData.terminalName"
              clearable
              placeholder="输入终端名称"
            />
          </el-form-item>
        </el-col>

        <el-col
          :lg="2"
          :xs="2"
        >
          <el-form-item style="width: 100%">
            <more-search-btn v-model:is-more="visible" />

          </el-form-item>
        </el-col>

        <el-col
          :lg="4"
          :xs="4"
        >
          <el-form-item style="width: 100%">
            <el-button
              class="border-btn"
              @click="reset"
            >重置</el-button>
            <el-button
              type="primary"
              class="main-btn"
              @click="listSearch"
            >搜索</el-button>
          </el-form-item>
        </el-col>

        <template v-if="visible">

          <el-col
            :lg="5"
            :xs="4"
          >
            <el-form-item
              label="产品信息"
              style="width: 100%"
            >
              <el-select
                v-model="formData.productId"
                filterable
                remote
                reserve-keyword
                :remote-method="remoteMethod"
                :loading="loading"
                placeholder="请选择产品"
                @change="listSearch"
              >
                <el-option
                  v-for="item in products"
                  :key="item.productId"
                  :label="item.name"
                  :value="item.productId"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col
            :lg="5"
            :xs="4"
          >
            <el-form-item
              label="终端所在地"
              style="width: 100%"
            >
              <el-cascader
                ref="cascader"
                v-model="formData.areas"
                :popper-append-to-body="false"
                :options="citys"
                :props="props1"
                placeholder="请选择地区"
                collapse-tags
                @change="areaChange"
              />
            </el-form-item>
          </el-col>
          <el-col
            :lg="5"
            :xs="4"
          >
            <el-form-item
              label="关联招商计划"
              style="width: 100%"
            >
              <el-input
                v-model="formData.planName"
                clearable
                placeholder="请输入关联招商计划"
              />
            </el-form-item>
          </el-col>
          <el-col
            :lg="5"
            :xs="4"
          >
            <el-form-item
              label="渠道客户"
              style="width: 100%"
            >
              <el-input
                v-model="formData.agentName"
                clearable
                placeholder="请输入渠道客户"
              />
            </el-form-item>
          </el-col>
          <el-col
            :lg="5"
            :xs="4"
          >
            <el-form-item
              label="营销模式"
              style="width: 100%"
            >
              <el-select
                v-model="formData.agentType"
                placeholder="请选择营销模式"
                @change="listSearch"
              >
                <el-option
                  v-for="item in agentType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col
            :lg="7"
            :xs="6"
          >
            <el-form-item
              label="注册日期"
              style="width: 100%"
            >
              <date-range-picker
                v-model:date="formData.date"
                clearable
                style="width: 100%;"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-form-item>
          </el-col>
        </template>

      </el-row>
    </el-form>

  </div>

  <table-view
    :data="tableData"
    :visible="visible"
    @row-click="rowClick"
  >
    <el-table-column
      show-overflow-tooltip
      align="left"
      header-align="center"
      prop="terminalName"
      label="终端名称"
      :min-width="150"
    />
    <el-table-column
      show-overflow-tooltip
      align="center"
      header-align="center"
      prop="agentName"
      label="所在地区"
      :min-width="100"
    >
      <template #default="scope">
        <span>{{ scope.row.provinceName }}/{{ scope.row.cityName }}/{{ scope.row.areaName }}</span>
      </template>
    </el-table-column>
    <el-table-column
      show-overflow-tooltip
      align="left"
      header-align="center"
      prop="productPopularName"
      label="产品名称"
      :min-width="150"
    />
    <el-table-column
      show-overflow-tooltip
      align="center"
      header-align="center"
      prop="approvalNumber"
      label="批准文号"
      :min-width="150"
    />
    <el-table-column
      show-overflow-tooltip
      align="center"
      header-align="center"
      prop="packSpecs"
      label="包装规格"
      :min-width="100"
    />
    <el-table-column
      align="center"
      header-align="center"
      label="准入模式"
      :min-width="100"
    >
      <template #default="scope">
        {{ getLabel('access_mode',scope.row.accessMode) }}
      </template>
    </el-table-column>
    <el-table-column
      align="center"
      header-align="center"
      label="终端价(元)"
      :min-width="100"
    >
      <template #default="scope">
        <div class="tab-line">
          <div>{{ scope.row.terminalPrice }}</div>

          <div
            v-if="scope.row.processDefinitionKey==='productPriceChange'&&scope.row.flowStatus==='DOING'"
            class="flow-status-color"
          >
            [终端价变更审核中]
          </div>
          <div
            v-if="scope.row.processDefinitionKey==='relationStandardChangeTerminalPrice'&&scope.row.flowStatus==='DOING'"
            class="flow-status-color"
          >
            [更换终端价审核中]
          </div>
        </div>

      </template>
    </el-table-column>
    <el-table-column
      show-overflow-tooltip
      align="left"
      header-align="center"
      prop="planName"
      label="关联招商计划"
      :min-width="100"
    />
    <el-table-column
      align="center"
      header-align="center"
      label="开发期限截至日期"
      :min-width="150"
    >
      <template #default="scope">
        {{ dateFormat('yyyy-mm-dd',scope.row.expireTime) }}
      </template>
    </el-table-column>
    <el-table-column
      align="center"
      header-align="center"
      label="开发保证金(元)"
      :min-width="150"
    >
      <template #default="scope">
        {{ scope.row.devEarnestMoney }}
      </template>
    </el-table-column>
    <el-table-column
      show-overflow-tooltip
      align="left"
      header-align="center"
      label="渠道客户名称"
      prop="agentName"
      :min-width="150"
    />
    <el-table-column
      align="center"
      header-align="center"
      label="营销模式"
      :min-width="150"
    >
      <template #default="scope">
        <span>{{ getLabel('agent_type',scope.row.sellMode) }}</span>
        <span v-if="scope.row.sellMode && scope.row.sellMode != 'direct'">[{{ getLabel( scope.row.agentType , scope.row.agentAttribute) }}]</span>
      </template>
    </el-table-column>
    <el-table-column
      show-overflow-tooltip
      align="center"
      header-align="center"
      label="配送商"
      :min-width="150"
    >
      <template #default="scope">
        <distributors-view
          v-if="scope.row.distributeContractDetails && scope.row.distributeContractDetails.length"
          :datas="scope.row.distributeContractDetails"
          :unit="scope.row.productInfoDetail?.sellUnit"
        />
      </template>
    </el-table-column>
    <el-table-column
      align="center"
      header-align="center"
      label="负责营销职员"
      prop="headName"
      :min-width="100"
    />
    <el-table-column
      align="center"
      header-align="center"
      label="注册日期"
      :min-width="150"
    >
      <template #default="scope">
        <span v-if="scope.row.agentRegisterTime">{{ dateFormat('yyyy-mm-dd',scope.row.agentRegisterTime) }}</span>
      </template>
    </el-table-column>
    <el-table-column
      align="center"
      header-align="center"
      label="状态"
      fixed="right"
      :min-width="150"
    >
      <template #default="scope">
        <div class="tab-line">
          <div>{{ getStatus(scope.row) }}</div>

          <div
            v-if="scope.row.flowStatus == 'DOING'"
            class="flow-status-color"
          >审核中</div>
        </div>

      </template>
    </el-table-column>
    <el-table-column
      align="center"
      header-align="center"
      label="操作"
      fixed="right"
      :min-width="300"
    >
      <template #default="{row}">

        <el-button
          v-if="row.devStatus == 2 || row.devStatus == 4"
          type="text"
          @click="handlSet(row)"
        >设置配送信息</el-button>

        <el-button
          v-if="row.devStatus == 2 || row.devStatus == 4"
          type="text"
          @click="handlFailure(row)"
        >开发失败</el-button>
      </template>
    </el-table-column>
  </table-view>

  <Pagination
    v-model:page="formData.page"
    v-model:limit="formData.pageSize"
    style="display: flex; justify-content: flex-end"
    :total="total"
    @pagination="getListData"
  />

</template>

<script>
import {crmStore} from '../../../../../store'
import area from '../../../../../../../utils/area'
import {defineComponent, getCurrentInstance, inject, onBeforeMount, reactive, ref, toRefs,} from 'vue'

export default defineComponent({
  name: 'DoingView',
  setup(props, { emit }) {
    const api = inject('api')
    const props1 = reactive({
      multiple: true,
      expandTrigger: 'hover',
      label: 'regionName',
      value: 'regionCode',
    })
    const currentInstance = getCurrentInstance()
    const typeOption = ref([
      {
        label: '全部',
        value: '',
      },
      {
        label: '我负责的',
        value: '1',
      },
      {
        label: '我下级负责的',
        value: '2',
      },
      {
        label: '我部门负责的',
        value: '3',
      },
    ])
    const devStatus = ref([
      {
        label: '全部',
        value: '',
      },
      {
        label: '开发失败',
        value: '-2',
      },
      {
        label: '审核未通过',
        value: '-1',
      },
      {
        label: '待开发',
        value: '1',
      },
      {
        label: '开发中',
        value: '2',
      },
      {
        label: '待进货',
        value: '4',
      },
      {
        label: '开发成功',
        value: '5',
      },
    ])

    var data = reactive({
      formData: {
        page: 1,
        pageSize: 20,
        date: [],
        terminalName: '',
        areas: [],
        region: [],
        productId: '',
        selectType: '',
        agentType: '',
        agentName: '',
        planName: '',
        devStatus: '',
      },
      tableData: [],
      total: 0,
      registeredDialog: null,
      visible: false,
      cascader: null,
      citys: area,
      loading: false,
      products: [],
      agentType: crmStore.getters['dictionary/getDictionary']['agent_type'],
    })

    const reset = () => {
      data.formData.selectType = ''
      data.formData.terminalName = ''
      data.formData.page = 1
      data.formData.headId = ''
      data.formData.date = []
      data.formData.areas = []
      data.formData.region = []
      data.formData.productId = ''
      data.formData.loading = false
      data.formData.products = []
      data.formData.agentType = ''
      data.formData.agentName = ''
      data.formData.planName = ''
      data.formData.devStatus = ''
      data.tableData = []
      getListData()
    }

    const listSearch = () => {
      data.formData.page = 1
      data.tableData = []
      getListData()
    }

    const remoteMethod = (query) => {
      data.products = []
      data.loading = true

      const a = {
        productName: '',
        devStatusType: 2,
      }
      if (query) {
        a.productName = query
      }

      api.supplyChannels.SUPPLY_CHANNELS_FORMAL_DEV_LIST(a).then((res) => {
        data.loading = false
        if (!res.code && res.data) {
          res.data.forEach((item) => {
            item.name =
              item.productPopularName + item.approvalNumber + item.packSpecs
          })
          data.products = res.data
        }
      })
    }

    const getListData = () => {
      const a = JSON.parse(JSON.stringify(data.formData))
      a.devStatusType = 2
      a.headId = Number(a.headId)
      a.productId = Number(a.productId)
      if (a.date && a.date.length) {
        a.registerStartTime = a.date[0]
        a.registerEndTime = a.date[1]
      }
      api.supplyChannels.SUPPLY_CHANNELS_LIST(a).then((res) => {
        if (!res.code && res.data) {
          data.tableData = res.data.list
          data.total = res.data.total
        }
      })
    }

    const refreshData = () => {
      getListData()
    }

    const areaChange = (val) => {
      const serve = currentInstance.proxy.getServeAreaData(
        val,
        data.cascader.getCheckedNodes()
      )
      data.formData.region = serve
      listSearch()
    }

    const rowClick = (row) => {}

    const handlSet = (row) => {
      // data.registeredDialog.open(row, null,1)

      emit('handlSet', row)
    }

    const handlFailure = (row) => {
      currentInstance.proxy
        .alertBox({
          message: '确定更改此渠道关系为开发失败？',
          title: '开发失败',
        })
        .then(() => {
          api.terminal.TERMINAL_FAILURE(row.id).then((res) => {
            if (res.code) {
              currentInstance.proxy.customMessage({
                type: 'error',
                message: res.msg,
              })
            } else {
              currentInstance.proxy.customMessage({
                type: 'success',
                message: '操作成功',
              })
              getListData()
            }
          })
        })
        .catch((err) => {
          console.log(err)
        })
    }

    const getStatus = (row) => {
      switch (row.devStatus) {
        case '-2':
          return '开发失败'
        case '-1':
          return '审核未通过'
        case '1':
          return '待开发'
        case '2':
          return '开发中'
        case '4':
          return '待进货'
        case '5':
          return '开发成功'
      }
    }

    onBeforeMount(() => {
      getListData()
    })

    return {
      ...toRefs(data),
      props1,
      typeOption,
      devStatus,

      getListData,
      rowClick,
      getStatus,
      handlSet,
      reset,
      listSearch,
      areaChange,
      remoteMethod,
      handlFailure,
      refreshData,
    }
  },
})
</script>

<style scoped>
</style>
